<template>
  <div>
    <ux-grid
      class="tableListValue"
      :data="body"
      :key="myKey"
      ref="plxTable"
      stripe
      fit
      border
      :max-height="tableHeight + 36"
      size="mini"
      :header-cell-style="{ 'text-align': 'center', color: '#299cfa' }"
      style="width: 100%; font-size: 12px"
      v-loading="loadingShow"
      element-loading-text="拼命加载中"
      :cell-style="handleCellStyle"
      element-loading-spinner="el-icon-loading"
      :highlight-current-row="true"
      show-overflow="tooltip"
      :widthResize="true"
      :cellClassName="getCellClassName"
    >
      <ux-table-column
        v-for="(item, index) in header"
        :width="index == 0 ? '' : item.width"
        :fixed="index == 0 ? 'left' : ''"
        :key="index"
        :title="index == 0 ? '' : item.name"
        :field="'header.' + index + '.value'"
        :align="item.alian"
        resizable
        :formatter="formatCellValue"
      >
        <template slot-scope="scope">
          {{ hasShow ? formatCellValue(scope.row[index]) : scope.row[index] }}
        </template>
      </ux-table-column>
    </ux-grid>
  </div>
</template>
<script>
import {
  setMessageCallback,
  publishMsg,
  removeMessageCallback,
  checkSpecialId,
} from "@/mqtt";
import { tableMixins } from "@/views/bigscreenDesigner/designer/widget/table/mixin/index";
export default {
  name: "TimeReport",
  mixins: [tableMixins],
  //此处存放数据
  props: {
    value: Object,
    // ispreview: Boolean,
    // widgetIndex: Number,
    // pageId: String,
    body: Array,
    header: Array,
    bodyConfigList: Array,
    loadingShow: Boolean,
    tableHeight: Number,
    getBodyData: Boolean,
    getCellClassName: {
      type: Function,
      default: () => {},
    },
    isShow: Object, //用来控制表格里面的 内容格式化
    // formatCellValue: {
    //   type: Function,
    //   default: () => {},
    // },
  },
  data() {
    return {
      myKey: 5000,
      scrollTop: 0,
    };
  },
  //计算属性
  computed: {
    hasShow() {
      if (this.isShow != null) {
        return this.isShow.setup.alarmColor;
      }
    },
    formattedData() {
      return this.body.map((row) => {
        return row.map((cell) => {
          return this.formatCellValue(cell);
        });
      });
    },
  },
  //监听data中数据变化
  watch: {},
  created() {
    this.initWidgetKey();
    // console.log(this.isShow, this.hasShow, this.formattedData, "timeReport");
  }, //生命周期 - 创建完成
  mounted() {
    setMessageCallback(this.onMessage);
  }, //生命周期 - 挂载完成
  //方法集合
  methods: {
    initWidgetKey() {
      this.myKey = 5000 + Math.trunc(Math.random() * 1000);
    },
    // @table-body-scroll="scroll"
    // scroll({ scrollTop, scrollLeft }) {
    //   this.scrollTop = scrollTop;
    // },
    formatCellValue(value) {
      if (value === 1) {
        return "零值越限";
      } else if (value === 2) {
        return "低值越限";
      } else if (value === 3) {
        return "高值越限";
      } else if (value === 4) {
        return "电流反向";
      } else if (value === 5) {
        return "电流不平衡";
      } else if (value === 0) {
        return "正常";
      }
      return value;
    },
    handleCellStyle({ row, column, rowIndex, columnIndex }) {
      // console.log(row, column, rowIndex, columnIndex);
      // if (rowIndex == 0) {
      //   return { background: "#000f34" };
      // }
      // if (column.title == "") {
      //   return { color: "#299cfa", fontWeight: "bold", background: "#000f34" };
      // }
      // else
      //  {
      //   return { color: "#00e8ff", fontWeight: "bold" };
      // }
    },
    disposePushData(ParamData, type) {
      if (this.getBodyData) {
        for (let k = 0; k < ParamData.length; k++) {
          //yc
          for (let i = 0; i < this.bodyConfigList.length; i++) {
            for (let j = 0; j < this.bodyConfigList[i].length; j++) {
              let cell = this.bodyConfigList[i][j];
              if (cell["type"] == type) {
                if (cell["id"] == ParamData[k]["id"]) {
                  let nCol = 1 + j;
                  let value = ParamData[k]["value"];
                  if (this.body.length > i) {
                    if (this.body[i].length > nCol) {
                      let oldValue = this.body[i][nCol];
                      if (value != oldValue) {
                        this.$set(this.body[i], nCol, value);
                        // this.body[i][nCol] = value;
                        // this.initWidgetKey();
                        // this.throttle(this.exampleFunction, 5000);
                        // this.body[i].splice(nCol, 1, value);
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    },
    onMessage(topic, msg) {
      // //console.log(topic, msg);
      switch (msg.webMsgType) {
        case 1009:
          switch (msg.funCode) {
            case 2:
              if (msg.retCode != 0 || !msg.data) {
                return this.$message.error(msg.retMsg);
              }
              this.disposePushData(msg.data, "yx");
              break;
            default:
              break;
          }
          break;
        case 1010:
          switch (msg.funCode) {
            case 2:
              if (msg.retCode != 0 || !msg.data) {
                return this.$message.error(msg.retMsg);
              }
              // debugger;
              this.disposePushData(msg.data, "yc");
              break;
            default:
              break;
          }
          break;
        case 1011:
          switch (msg.funCode) {
            case 2:
              if (msg.retCode != 0 || !msg.data) {
                return this.$message.error(msg.retMsg);
              }
              this.disposePushData(msg.data, "ym");
              break;
            default:
              break;
          }
          break;
        case 1015:
          switch (msg.funCode) {
            case 4:
              if (msg.retCode != 0 || !msg.data) {
                return this.$message.error(msg.retMsg);
              }
              this.disposePushData(msg.data, "task");
              break;
            default:
              break;
          }
          break;
        default:
          break;
      }
    },
  },
  destroyed() {
    removeMessageCallback(this.onMessage);
  },
};
</script>
<style lang="scss" scoped>
@import "@/views/bigscreenDesigner/designer/widget/table/css";
</style>